
<!-- setup Vue 提供的语法糖，定义 UI 中即可使用 -->
<script setup lang="ts">
import { ref } from 'vue';
const pets =ref(['蟑螂','仓鼠','捕鸟蛛','猪鼻蛇','鬃狮蜥蜴','泥鳅'])


const person = ref({
  name: 'jack',
  age: 18,
  friend: 'rose',
  food:'隆江猪脚饭'
})
</script>

<!-- 结构 -->
<template>
  <h2>小黑宠物店</h2>
  <ul>
    <!-- <li v-for="(it,index) in pets" :key="index">
      {{  it  }} ---{{ index+1 }}
    </li> -->

    <!-- 下标用不上，可以省略不写 -->
    <!-- <li v-for="it in pets" :key="it">
      {{  it  }}
    </li> -->


    <!-- 循环对象 
      第一项: 属性值 
      第二项: 键
    -->
     <!-- <li v-for="(item,key) in person" :key="item">
      {{  item  }}--{{key  }}
     </li> -->

    <!-- 基于数字 生成列表
        开发初期，填充界面 
    -->
     <!-- <li v-for="item in 5"  :key="item">
       <a href="#">🦆🐔🐱</a><button>我是按钮</button>
     </li> -->
  </ul>
</template>


<!-- 样式 -->
<style scoped>
  img{
    width: 200px;
    height: 200px;
  }
  .box{
    width: 100px;
    height: 100px;
    border:1px black solid;
  }
  .skyblue{
    background-color: skyblue;
  }
  .orange{
    border-color: orange;
    border-width: 10px;
  }
</style>
